<!--  -->
<template>
  <div class="big-screen">
    <ScaleBox>
      <div class="container">
        <b-header title="数字化车间-包装"></b-header>
        <div class="content">
          <div class="left">
            <Box title="数据统计">
              <div class="statistics">
                <div class="order">
                  <div class="order-title">
                    <span> 工单 </span>
                  </div>
                  <div class="data">
                    <div class="data-title">待生产</div>
                    <div class="value">15</div>
                  </div>
                  <div class="data">
                    <div class="data-title">生产中</div>
                    <div class="value">7</div>
                  </div>
                </div>
                <div class="list">
                  <div class="list-title">
                    <div class="icon">
                      <img src="../../assets/bigScreen/title-left.png" alt="" />
                    </div>
                    不良类型统计
                  </div>
                  <div class="data-list">
                    <div
                      class="data-list-item"
                      v-for="(v, k) in list"
                      :key="v.type"
                    >
                      <div class="info">
                        <div class="no">
                          {{ k + 1 < 10 ? "0" + (k + 1) : k + 1 }}
                        </div>
                        <span class="type">{{ v.type }}</span>
                        <span class="value">{{ v.value }}</span>
                      </div>
                      <div class="bar">
                        <div
                          class="bar-inner"
                          :style="{ width: (v.value / 300) * 100 + '%' }"
                        ></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="chart">
                  <div class="list-title">
                    <div class="icon">
                      <img src="../../assets/bigScreen/title-left.png" alt="" />
                    </div>
                    不良数量/不良率统计
                  </div>
                  <div class="form">
                    <!-- 单选框，选择当日当月 -->
                    <div class="radio">
                      <el-radio-group
                        fill="#ffcf5f"
                        class="radio-group"
                        v-model="radio"
                      >
                        <!-- 使用el-radio -->
                        <el-radio :label="1">当日</el-radio>
                        <el-radio :label="2">当月</el-radio>
                      </el-radio-group>
                    </div>
                  </div>
                  <div class="chart-box">
                    <v-chart class="chart-item" :option="lineOption" />
                    <!-- 饼图 -->
                    <v-chart class="chart-item pie" :option="pieOption" />
                  </div>
                </div>
              </div>
            </Box>
          </div>
          <div class="right">
            <!-- 实时进度 - 待生产&&生产中 -->
            <Box title="实时进度 - 待生产&&生产中">
              <div class="table-box">
                <Table :tableData="waitTableData" style="width: 100%">
                  <el-table-column
                    prop="customerName"
                    label="客户名称"
                  ></el-table-column>
                  <el-table-column
                    prop="orderNumber"
                    label="订单号"
                  ></el-table-column>
                  <el-table-column
                    prop="productName"
                    label="产品名称"
                  ></el-table-column>
                  <el-table-column
                    prop="specification"
                    label="规格"
                  ></el-table-column>
                  <el-table-column
                    prop="orderQuantity"
                    label="下单数量"
                  ></el-table-column>
                  <el-table-column
                    prop="producedQuantity"
                    label="已生产数量"
                  ></el-table-column>
                  <el-table-column prop="team" label="班组"></el-table-column>
                  <el-table-column
                    prop="productionStatus"
                    label="生产状态"
                  ></el-table-column>
                </Table>
                <Table
                  :tableData="waitTableData"
                  style="width: 100%; height: 50%"
                >
                  <el-table-column
                    prop="customerName"
                    label="客户名称"
                  ></el-table-column>
                  <el-table-column
                    prop="orderNumber"
                    label="订单号"
                  ></el-table-column>
                  <el-table-column
                    prop="productName"
                    label="产品名称"
                  ></el-table-column>
                  <el-table-column
                    prop="specification"
                    label="规格"
                  ></el-table-column>
                  <el-table-column
                    prop="orderQuantity"
                    label="下单数量"
                  ></el-table-column>
                  <el-table-column
                    prop="producedQuantity"
                    label="已生产数量"
                  ></el-table-column>
                  <el-table-column prop="team" label="班组"></el-table-column>
                  <el-table-column
                    prop="productionStatus"
                    label="生产状态"
                  ></el-table-column>
                </Table>
              </div>
            </Box>
          </div>
        </div>
      </div>
    </ScaleBox>
  </div>
</template>

<script>
import BHeader from "./header.vue";
import ScaleBox from "../../components/bigScreen/SacleBox.vue";
import Box from "../../components/bigScreen/Box.vue";
import Table from "../../components/bigScreen/Table.vue";
export default {
  async mounted() {},

  data() {
    return {
      radio: 1,

      list: [
        {
          type: "破损",
          value: 235,
        },
        {
          type: "破损",
          value: 235,
        },
        {
          type: "破损",
          value: 235,
        },
        {
          type: "破损",
          value: 235,
        },
        {
          type: "破损",
          value: 235,
        },
        {
          type: "破损",
          value: 235,
        },
        {
          type: "破损",
          value: 235,
        },
      ],
      // 待生产数据
      waitTableData: this.generateMockData(),
      lineOption: {
        xAxis: {
          type: "category",
          data: ["不良品", "成品", "全部"], // 使用中文标签
          axisTick: {
            show: false, // 不显示轴刻度
          },
          axisLine: {
            show: false, // 不显示轴线
          },
        },
        yAxis: {
          type: "value",
          show: false, // 不显示y轴线和刻度
          splitLine: { show: false }, // 不显示背景条纹
        },
        // 消除边距
        grid: {
          left: 0,
          right: 0,
          bottom: 30,
          top: 0,
          containLabel: true, // 包含标签在内部
        },
        series: [
          {
            data: [
              { value: 120, itemStyle: { color: "#0581c3" } },
              { value: 200, itemStyle: { color: "#0064fb" } },
              { value: 150, itemStyle: { color: "#75bdff" } },
            ],
            type: "bar",
            barCategoryGap: "3px", // 设置柱子之间的间隔为 3 像素
          },
        ],
      },
      pieOption: {
        grid: {
          left: 0,
          right: 0,
          bottom: 0,
          top: 0,
          containLabel: true, // 包含标签在内部
        },
        series: [
          {
            type: "pie",
            radius: ["60%", "80%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            label: {
              show: true, // 显示标签
              position: "center", // 标签位置为中心
              formatter: "0.6%\n不良率", // 显示的文本
              fontSize: "12",
              // 设置行高
              lineHeight: 16,
              color: "#fff", // 标签的文字颜色，可以自定义
            },
            labelLine: {
              show: false,
            },

            data: [
              { value: 50, itemStyle: { color: "#ffcf5f" } },
              { value: 50, itemStyle: { color: "#1c68b0" } },
            ],
          },
        ],
      },
    };
  },

  methods: {
    generateMockData() {
      // 此函数生成模拟数据
      return Array.from({ length: 10 }, (_, index) => ({
        customerName: `客户${index + 1}`,
        orderNumber: `DD00${index + 1}`,
        productName: `产品${index + 1}`,
        specification: `规格${index + 1}`,
        orderQuantity: Math.floor(Math.random() * 100) + 1,
        producedQuantity: Math.floor(Math.random() * 100) + 1,
        team: `班组${(index % 3) + 1}`,
        productionStatus: index % 2 === 0 ? "生产中" : "已完成",
      }));
    },
  },

  components: {
    BHeader,
    ScaleBox,
    Box,
    Table,
  },

  computed: {},
};
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  background: #030715;
  padding: 24px;
  display: flex;
  flex-direction: column;
  .content {
    display: flex;
    .left {
      width: 460px;
      height: 100%;
      .statistics {
        padding: 20px;
        .order {
          background: #0c2745;
          width: 420px;
          height: 122px;
          display: flex;
          align-items: center;
          justify-content: center;
          .order-title {
            width: 56px;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-size: 18px;
            border-bottom: 1px solid #54677c;
            text-align: center;
          }
        }
        .data {
          background: #2384dd;
          width: 116px;
          height: 90px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          color: #fff;
          font-size: 20px;
          margin-left: 24px;
          &:last-child {
            margin-left: 16px;
            background: #1c68b0;
          }
          .data-title {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.6);
            margin-bottom: 4px;
          }
        }
      }
      .list-title {
        display: flex;
        align-items: center;
        font-size: 18px;
        line-height: 1;
        font-weight: 500;
        color: #fff;
        .icon {
          img {
            width: 4px;
            height: 20px;
            margin-right: 8px;
          }
        }
      }
      .list {
        margin-top: 24px;

        .data-list {
          margin-top: 28px;
          .data-list-item {
            margin-bottom: 16px;
            display: flex;
            flex-direction: column;
            .info {
              display: flex;
              line-height: 1;
              align-items: center;
              .no {
                border: 1px solid #fff;
                color: #fff;
                font-size: 14px;
                padding: 4px;
                display: flex;
                align-items: center;
                justify-content: center;
              }
              .type {
                color: rgba(255, 255, 255, 0.6);
                font-size: 16px;
                margin-left: 12px;
              }
              .value {
                color: #fff;
                font-size: 16px;
                margin-left: auto;
              }
            }
            .bar {
              width: 100%;
              height: 4px;
              background: #384352;
              margin-top: 8px;
              .bar-inner {
                height: 100%;
                background: #2384dd;
              }
            }
          }
        }
      }
      .chart {
        .radio-group {
          margin-top: 27px;
          margin-bottom: 20px;
          display: flex;
          justify-content: center;
        }
        // 修改radio颜色为FFCF5F
        ::v-deep .el-radio__input.is-checked .el-radio__inner {
          border-color: #ffcf5f;
          background: #ffcf5f;
        }
        // 增加圆圈尺寸
        ::v-deep {
          .el-radio__inner {
            width: 24px;
            height: 24px;
            border: 2px solid #ffcf5f;
            background: transparent;
          }
          .el-radio__label {
            color: #fff;
            font-size: 16px;
          }
        }
        .chart-box {
          width: 100%;
          display: flex;
          position: relative;
          .chart-item {
            width: 50%;
            height: 180px;
            &.pie {
              left: 210px;
              bottom: 24px;
              position: absolute;
            }
          }
        }
      }
    }
    .right {
      margin-left: 18px;
      flex: 1;
      .table-box {
        width: 100%;
        display: flex;
        height: 100%;
        flex-direction: column;
      }
    }
  }
}
</style>
<style lang="scss">
.big-screen {
  .el-table::before {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0 !important;
  }
}
</style>
